<template>
  <t-layout-page-item style="background-color: #f7f7f7">
    <t-select-table
      :table="state.table"
      :columns="props.columns"
      :max-height="200"
      isShowPagination
      :keywords="{ label: props.keywords.label, value: props.keywords.value }"
      isKeyup
      @radioChange="radioChange"
      @page-change="pageChange"
      @row-click="handleRowClick"
    />
  </t-layout-page-item>
</template>

<script setup lang="tsx">
import { reactive, onMounted, defineProps, defineEmits } from "vue";
import axios from "../../axios/axiosInstance";
import { ElMessageBox } from "element-plus";
const emits = defineEmits(["row-selected"]);
const props = defineProps({
  // 从父组件接收表格列配置
  columns: {
    type: Array,
    required: true,
  },
  // 从父组件接收关键词配置
  keywords: {
    type: Object as () => { label: string; value: string },
    default: () => ({ label: "", value: "" }),
  },
  // 从父组件接收数据请求的 URL
  apiUrl: {
    type: String as () => string,
    required: true,
  },
});

const state: any = reactive({
  table: {
    total: 0,
    currentPage: 1,
    data: [],
  },
});

onMounted(() => {
  getData(1);
});

const getData = async (pageNum) => {
  axios({
    url: props.apiUrl,
    method: "post",
    data: {
      page: pageNum,
      limit: 10,
    },
  }).then((res) => {
    console.log(res.data);
    state.table.data = res.data;
  });
};

// 获取当前的页码
const pageChange = (val) => {
  console.log("获取当前的页码", val);
  state.table.currentPage = val;
  getData(val);
};
const handleRowClick = (row) => {
  // 触发自定义事件将点击的行数据传递给父组件
  emits("row-selected", row);
};
const handleStatusChange = (row) => {
  let text = row.enableStatus === 1 ? "启用" : "废止";
  ElMessageBox.confirm(`确认要${text}这条数据吗？`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      console.log("点击确定");
    })
    .catch(() => {
      console.log("点击确定");
    });
};

const radioChange = (row) => {
  console.log("单选--传给后台的值", row);
};
</script>
<style scoped></style>
